import React, { Component } from 'react';
import './Test.css';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.count || 0,
      color: props.color || 'red',
      resData: props.resData || 'no data',
    
    };
    console.log(this.props);
  }

  getUrl() {
    var id = document.getElementById('get-input').value;
    var fetchConf = {
      type: 'getUrl',
      id: id,
    };
    this.props.onGetClicked(fetchConf);
  }

  postUrl() {
    var id = document.getElementById('post-input').value;
    var fetchConf = {
      type: 'postUrl',
      id: id,
    };
    this.props.onPostClicked(fetchConf);
  }

  getUrlProxy() {
    var id = document.getElementById('get-input-proxy').value;
    var fetchConf = {
      type: 'getUrlProxy',
      id: id,
    };
    this.props.onGetProxyClicked(fetchConf);
  }

  render() {
    return (
      <div className="test">
        <div className="test-title">
          简单fetch功能实现
        </div>
        <div className="test-fetch">
          <div className="test-fetch-box">
            <input id="get-input" type="text" placeholder="在此输入一个id(整数)" />
            <button onClick={() => this.getUrl()}>get</button>
          </div>
          <div className="test-fetch-box">
            <input id="post-input" type="text" placeholder="在此输入一个id(整数)" />
            <button onClick={() => this.postUrl()}>post</button>
          </div>
          <div className="test-fetch-box">
            <input id="get-input-proxy" type="text" placeholder="在此输入一个id(整数)" />
            <button onClick={() => this.getUrlProxy()}>get(通过代理转发)</button>
          </div>
        </div>
        <div id="result-area" style={{color: (this.props.color == 'red' ? 'red' : 'blue')}}>
          请求结果：{this.props.resData}
        </div>
        <div id="count-area">
          请求次数：{this.props.count}
        </div>
      </div>
    );
  }
}

export default Test;
